<template>
    <el-container direction="vertical">
        <Header/>
        <el-container class="auto-width" direction="vertical">
            <el-main>
                <el-form id="userForm" :model="userForm" status-icon :rules="rules" label-position="right" ref="userForm" label-width="80px">
                    <el-form-item label="昵称" prop="nickname">
                        <el-input type="text" v-model="userForm.nickname" placeholder="长度2~10 给自己起个名吧"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input type="text" v-model="userForm.email" autocomplete="off" placeholder="登录邮箱地址" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="修改密码" prop="pass">
                        <el-input type="password" v-model="userForm.pass" autocomplete="off" placeholder="长度6~16 不修改请留空 >o< "></el-input>
                    </el-form-item>
                    <el-form-item label="重复密码" prop="checkPass">
                        <el-input type="password" v-model="userForm.checkPass" autocomplete="off" placeholder="打死都不能告诉别人 >o<"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                        <el-input type="text" v-model="userForm.mobile" autocomplete="off" placeholder="⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄"></el-input>
                    </el-form-item>
                    <el-form-item label="用户角色" prop="role">
                        <el-input type="text" v-model="role" autocomplete="off" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('userForm')">保存</el-button>
                        <el-button type="danger" @click="logout()">退出</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
        <Footer/>
    </el-container>
</template>

<script>
    import UserService from '../services/user.service';
    import Header from '../components/Header';
    import Footer from '../components/Footer';
    import Loading from '../utils/loading';

    export default {
        name: 'User',
        components: {Header, Footer},
        props: {},
        data() {
            return {
                role: 'Nan',
                userForm: {
                    email: '',
                    pass: '',
                    checkPass: '',
                    nickname: '',
                    mobile: '',
                },
                rules: {
                    nickname: [
                        {required: true, message: '昵称不能为空', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur'},
                    ],
                    email: [
                        {
                            required: true,
                            message: '请输入邮箱',
                            trigger: 'blur',
                        },
                        {
                            type: 'email',
                            message: '请输入有效的邮箱地址',
                            trigger: ['blur'],
                        },
                    ],
                    pass: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback();
                                } else {
                                    if (this.userForm.checkPass !== '') {
                                        this.$refs.userForm.validateField('checkPass');
                                    }
                                    callback();
                                }
                            }
                            , trigger: 'blur',
                        },
                        {min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur'},
                    ],
                    checkPass: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback();
                                } else if (value !== this.userForm.pass) {
                                    callback(new Error('两次输入密码不一致!'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: 'blur',
                        },
                    ],
                    mobile: [
                        {
                            required: true,
                            validator: (rule, value, callback) => {
                                const reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
                                if (!reg.test(value)) {
                                    callback(new Error('请输入正确的手机号码'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: 'blur',
                        },
                    ],
                },
            };
        },
        async mounted() {
            Loading.showLoad('正在获取用户信息');
            let result = await UserService.info();
            if (result.code === 0) {
                this.$message.error(result.msg);
            } else {
                this.userForm.email = result.data.email;
                this.userForm.nickname = result.data.nickname;
                this.userForm.mobile = result.data.mobile;
                this.role = result.data.role === 0 ? '管理员' : '普通用户';
            }
            Loading.hideLoad();
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        Loading.showLoad('正在更新用户信息');
                        let result = await UserService.update(this.userForm);
                        if (result.code === 0) {
                            this.$message.error(result.msg);
                        } else {
                            this.$message.success('更新成功！');
                            if (result.data.logout === 1) {
                                this.logout();
                            }
                        }
                        Loading.hideLoad();
                    } else {
                        return false;
                    }
                });
            },
            logout() {
                this.$store.dispatch('logout').then(() => {
                    this.$router.push('/login');
                }).catch(e => {
                    console.error(e);
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
    };
</script>

<style scoped lang="scss">
    main {
        width: 100% !important;
        margin: 5% auto;
        max-width: 540px;
        border-radius: 2px;
        border: 1px solid #eee;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }
</style>
